<template>
  <div class="con">
    <div class="header">
      <div class="hTitle">
        表格 TO DO LIST
        <el-button type="primary" size="mini" @click="add">新增</el-button>
      </div>
      
    </div>
    <div class="table">
      
      <div class="title">未完成</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="喜好" prop="love"></el-table-column>
        <el-table-column align="center" width="230">
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-finished"
              title="完成"
              size="mini"
              circle
              @click="finish(scope.index,scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              title="删除"
              size="mini"
              circle
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="title">已完成</div>
      <el-table :data="finishData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="喜好" prop="love"></el-table-column>
        <el-table-column align="center" width="230">
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-refresh-left"
              title="打回"
              size="mini"
              circle
              @click="returnIt(scope.index,scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              title="删除"
              size="mini"
              circle
              @click="deleFinish(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        class="dialogOpen"
        title="添加用户"
        :visible.sync="dialogOpen"
        width="50%"
        :before-close="handleClose"
      >
        <div class="block">
          <el-form ref="addData" :model="addData" :rules="rules" label-width="80px">
            <el-form-item prop="name" label="姓名">
              <el-input v-model="addData.name"></el-input>
            </el-form-item>
            <el-form-item prop="love" label="喜好">
              <el-input v-model="addData.love"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  
</template>

<script>
export default {
    data () {
        return {
            tableData : [
                {
                    name : '小新',
                    love : '娜娜子',
                }
            ],
            addData : {
                name : '',
                love : '',
            },
            rules: {
                name: [
                    { required: true, message: "请输入姓名", trigger: "blur" }
                ],
                love: [
                    { required: true, message: "请输入喜欢", trigger: "blur" }
                ]
            },
            dialogOpen:false,
            finishData:[],
        }
    },
    methods:{
        add(){
            this.addData = {
                name : '',
                love : '',
            }
            this.dialogOpen = true
        },
        finish(index,row){
          this.tableData.splice(index,1)
          this.finishData.push(row)
        },
        handleClose(){
            this.dialogOpen = false
        },
        save(){
            this.$refs['addData'].validate((valid) => {
                if (valid) {
                    this.tableData.push(this.addData)
                    // this.$refs['addData'].resetFields();
                    this.dialogOpen = false
                } else {
                    this.$message.error('error submit!!')
                return false;
                }
            });
            
        },
        handleDelete(index,row){
            this.$confirm("确认删除吗, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
                this.tableData.splice(index,1)
            })
            .catch(() => {
                this.$message({
                type: "info",
                message: "已取消删除"
                });
            });
        },
        returnIt(index,row){
          this.finishData.splice(index,1)
          this.tableData.unshift(row)
        },
        deleFinish(index,row){
          this.$confirm("确认删除吗, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
                this.finishData.splice(index,1)
            })
            .catch(() => {
                this.$message({
                type: "info",
                message: "已取消删除"
                });
            });
        }
    }
};
</script>

<style scoped>
.header{
  height: 50px;
  width: 100%;
  background-color: #303133;
  line-height: 50px;
}
.hTitle{
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  width: 100%;
  text-align: center;
}
.hTitle button{
  vertical-align: top;
  margin-top: 10px;
  margin-left: 50px;
}
.table{
  width: 70%;
  margin: 20px auto;
}
.title{
  color: #303133;
  font-weight: bold;
  font-size: 18px;
  /* text-align: center; */
  padding-left: 20px;
  line-height: 100px;
}
.page{
    text-align: right;
}
</style>